<template>
  <el-card class="box-card">
    <div class="in-storage" style="margin-right:0px;">在库</div>
    &nbsp;
    <div class="lent-out" style="margin-right:0px;">借出</div>
    &nbsp;
    <div class="missing" style="margin-right:0px;">遗失</div>
    &nbsp;
    <div class="reserved" style="margin-right:0px;">预定</div>
  </el-card>
  <el-tabs v-model="activeName" stretch type="card">
    <el-tab-pane  v-for="cate of list" :key="cate" :label="cate">
      <Inspect_Form :category="cate"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Inspect_Form from "@/components/Inspect_Form";

export default {
  name: "Inspect_Body",
  data() {
    return {
      device: {},
      list: ["相机类", "镜头类", "电池类", "存储类", "转接类", "常用配件类", "不常用配件类"],
    }
  },
  methods:{
    formatter: function (code) {
      return code < 10 ? '0' + code : code.toString()
    },
  },
  components: {
    Inspect_Form
  },
};
</script>

<style scoped>


.in-storage {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #67C23A;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}

.missing {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #F56C6C;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}

.lent-out {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #E6A23C;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}

.reserved {
  color: #FFFFFF;
  border-radius: 7px;
  padding: 4px;
  display: inline-block;
  background-color: #409eff;
  margin-top: 6px;
  margin-right: 6px;
  min-width: 20px;
  text-align: center;
}
</style>
